<template>
  <div>
    <DogDog3
      v-for="(obj, index) in arr"
      :key="index"
      :imgurl="obj.dogImgUrl"
      :dogname="obj.dogName"
      @love="Lovefn"
    ></DogDog3>

    <hr />
    <p>显示喜欢的狗:</p>
    <ul>
      <li v-for="(item, index) in loveArr" :key="index">{{ item }}</li>
    </ul>
  </div>
</template>

<script>
import DogDog3 from '@/components/DogDog3.vue'
export default {
  data() {
    return {
      // 1. 准备数据
      arr: [
        {
          dogImgUrl:"https://www.qmbk.com/jingyan/UploadFiles_2374/202004/2020040111180041.jpg",
          dogName: "金毛1",
        },
        {
          dogImgUrl:"https://www.qmbk.com/jingyan/UploadFiles_2374/202004/2020040111180041.jpg",
          dogName: "金毛2",
        },
        {
          dogImgUrl:"https://www.qmbk.com/jingyan/UploadFiles_2374/202004/2020040111180041.jpg",
          dogName: "金毛3",
        },
        {
          dogImgUrl:"https://www.qmbk.com/jingyan/UploadFiles_2374/202004/2020040111180041.jpg",
          dogName: "金毛4",
        },
        {
          dogImgUrl:"https://www.qmbk.com/jingyan/UploadFiles_2374/202004/2020040111180041.jpg",
          dogName: "金毛5",
        },
        {
          dogImgUrl:"https://www.qmbk.com/jingyan/UploadFiles_2374/202004/2020040111180041.jpg",
          dogName: "金毛6",
        }
      ],
      loveArr: []
    };
  },
  components: {
    DogDog3,
  },
  methods: {
    Lovefn(dogName) {
      this.loveArr.push(dogName)
    },
  },
};
</script>

<style >
</style>